<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>
    <script type="text/javascript">

         $(main);
          function main(){
            // document.getElementById("ckOper").onclick=fun1;
              $("#ckOper").bind("click",fun1);
//             var ckArray = document.getElementsByName("ck");
//              for(var i=0;i<ckArray.length;i++){
//                   var domObj = ckArray[i];
//                  domObj.onclick = fun2;
//              }

              $(":checkbox:gt(0)").bind('click',fun2);

//             var $tr = $("table tr:gt(0)");
//             $tr.each(
//                    function (index,domObj){
//                        domObj.onmouseover = fun3;
//                        domObj.onmouseout = fun4;
//                    }
//
//             );

              $("table tr:gt(0)").mouseover(fun3);
              $("table tr:gt(0)").mouseout(fun4);
          }

           //根据标题行checkbox的选中状态
          //影响数据行checkbox的选中状态
           function fun1(){
               //1.定位标题行checkbox的选中状态
                var flag =  $(":checkbox:first").prop("checked");
              //2.为数据行上所有的checkbox的选中状态赋值
               $(":checkbox:gt(0)").prop("checked",flag);
           }

           //根据数据行checkbox的选中状态
          //影响标题行checkbox的选中状态
           function fun2(){

               //1.数据行checkbox的个数
               var ck_NUM = $(":checkbox:gt(0)").length;
               //2.数据行被选中的checkbox的个数
              var checked_Num =  $(":checkbox:gt(0):checked").length;
               //3.判断

                 if(ck_NUM  ==  checked_Num){
                     $(":checkbox:first").prop("checked",true);
                 }else{
                     $(":checkbox:first").prop("checked",false);
                 }

           }


            //鼠标悬停的标签背景颜色变为红色
            function fun3(){

                // this  鼠标悬停的标签的Dom
                $(this).css("background-color","red");
            }

        //鼠标从当前标签上移出时,标签背景颜色变为白色

          function fun4(){

              // this  鼠标悬停的标签的Dom
              $(this).css("background-color","white");
          }

    </script>

</head>
<body >

          <center>
                 <table border="2">
                     <!--标题行-->
                     <tr>
                         <td><input type="checkbox" id="ckOper"/></td>
                         <td>职员姓名</td>
                         <td>职员职位</td>
                         <td>职员工资</td>
                     </tr>

                     <!--数据行-->

                     <tr>
                         <td><input type="checkbox" name="ck"/></td>
                         <td>mike</td>
                         <td>PG</td>
                         <td>14000</td>
                     </tr>

                     <tr>
                         <td><input type="checkbox" name="ck"/></td>
                         <td>allen</td>
                         <td>leader</td>
                         <td>54000</td>
                     </tr>

                     <tr>
                         <td><input type="checkbox" name="ck"/></td>
                         <td>lili</td>
                         <td>前台</td>
                         <td>24000</td>
                     </tr>

                     <tr>
                         <td><input type="checkbox" name="ck"/></td>
                         <td>小赵</td>
                         <td>快递</td>
                         <td>15000</td>
                     </tr>

                 </table>

           </center>

</body>
</html>